<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>sentox-TextBox</title>
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/easyui.css" />
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/font-awesome.min.css">

		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	</head>

	<body style="margin:10px;">
		<h2>Basic TextBox</h2>
		<p>The textbox allows a user to enter information.</p>
		<div style="margin:20px 0;"></div>
		<div class="easyui-panel" title="Register" style="width:400px;padding:30px 60px">
			<div style="margin-bottom:20px">
				<div>Email:</div>
				<input class="easyui-textbox" data-options="prompt:'Enter a email address...',validType:'email'" style="width:100%;height:32px">
			</div>
			<div style="margin-bottom:20px">
				<div>First Name:</div>
				<input class="easyui-textbox" style="width:100%;height:32px">
			</div>
			<div style="margin-bottom:20px">
				<div>Last Name:</div>
				<input class="easyui-textbox" style="width:100%;height:32px">
			</div>
			<div style="margin-bottom:20px">
				<div>Company:</div>
				<input class="easyui-textbox" style="width:100%;height:32px">
			</div>
			
			<div>
				<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:32px">Register</a>
			</div>
		</div>
		<!--------------------------------------------------------------------------------------------------------------------------->
		<h2>Fluid TextBox</h2>
		<p>This example shows how to set the width of TextBox to a percentage of its parent container.</p>
		<div style="margin:20px 0;"></div>
		<p>width: 50%</p>
		<input class="easyui-textbox" data-options="prompt:'Enter something here...'" style="width:50%;height:32px">
		<p>width: 30%</p>
		<input class="easyui-textbox" data-options="prompt:'Enter something here...'" style="width:30%;height:32px">
		<!--------------------------------------------------------------------------------------------------------------------------->
		<h2>Multiline TextBox</h2>
    	<p>This example shows how to define a textbox for the user to enter multi-line text input.</p>
    	<div style="margin:20px 0;"></div>
    	<input class="easyui-textbox" data-options="multiline:true" value="This TextBox will allow the user to enter multiple lines of text." style="width:300px;height:100px">
		<!--------------------------------------------------------------------------------------------------------------------------->
		<h2>TextBox with Clear Icon</h2>
		<p>This example shows how to create an textbox with an icon to clear the input element itself.</p>
		<div style="margin:20px 0 40px 0;"></div>
		<input id="tt" style="width:400px" data-options="
				prompt: 'Input something here!',
				icons:[{
					iconCls:'fa fa-search fa-yxa7',
					handler: function(e){
						var v = $(e.data.target).textbox('getValue');
						alert('The inputed value is ' + (v ? v : 'empty'));
					}
				}]
				">
		<script>
			$.extend($.fn.textbox.methods, {
				addClearBtn: function(jq, iconCls){
					return jq.each(function(){
						var t = $(this);
						var opts = t.textbox('options');
						opts.icons = opts.icons || [];
						opts.icons.unshift({
							iconCls: iconCls,
							handler: function(e){
								$(e.data.target).textbox('clear').textbox('textbox').focus();
								$(this).css('visibility','hidden');
							}
						});
						t.textbox();
						if (!t.textbox('getText')){
							t.textbox('getIcon',0).css('visibility','hidden');
						}
						t.textbox('textbox').bind('keyup', function(){
							var icon = t.textbox('getIcon',0);
							if ($(this).val()){
								icon.css('visibility','visible');
							} else {
								icon.css('visibility','hidden');
							}
						});
					});
				}
			});
			
			$(function(){
				$('#tt').textbox().textbox('addClearBtn', 'icon-clear');
			});
		</script>
		<!--------------------------------------------------------------------------------------------------------------------------->
		<h2>TextBox with Icons</h2>
		<p>Click the icons on textbox to perform actions.</p>
		<div style="margin:20px 0 40px 0;"></div>
	    <div style="margin:10px 0 20px 0">
	        <span>Select Icon Align: </span>
	        <select onchange="$('#tt2').textbox({iconAlign:this.value})">
	            <option value="right">Right</option>
	            <option value="left">Left</option>
	        </select>
	    </div>
		<input id="tt2" class="easyui-textbox" style="width:400px" data-options="
				prompt: 'Input something here!',
				iconWidth: 22,
				icons: [{
					iconCls:'fa fa-plus fa-yxa7',
					handler: function(e){
						$(e.data.target).textbox('setValue', 'Something added!');
					}
				},{
					iconCls:'fa fa-minus fa-yxa7',
					handler: function(e){
						$(e.data.target).textbox('clear');
					}
				},{
					iconCls:'fa fa-search fa-yxa7',
					handler: function(e){
						var v = $(e.data.target).textbox('getValue');
						alert('The inputed value is ' + (v ? v : 'empty'));
					}
				}]
				">
		<!--------------------------------------------------------------------------------------------------------------------------->
		<h2>Custom TextBox</h2>
		<p>This example shows how to custom a login form.</p>
		<div style="margin:20px 0;"></div>
		<div class="easyui-panel" title="Login to system" style="width:400px;padding:30px 70px 20px 70px">
			<div style="margin-bottom:10px">
				<input class="easyui-textbox" style="width:100%;height:40px;padding:12px" data-options="prompt:'Username',iconCls:'icon-man',iconWidth:38">
			</div>
			<div style="margin-bottom:20px">
				<input class="easyui-textbox" type="password" style="width:100%;height:40px;padding:12px" data-options="prompt:'Password',iconCls:'icon-lock',iconWidth:38">
			</div>
			<div style="margin-bottom:20px">
				<input type="checkbox" checked="checked">
				<span>Remember me</span>
			</div>
			<div>
				<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="padding:5px 0px;width:100%;">
					<span style="font-size:14px;">Login</span>
				</a>
			</div>
		</div>

	</body>

</html>